<template>
  <div class="tab-content-wrap">
    <div
      class="btn"
      v-for="(item,index) in commandList"
      :key="index"
      :style="{background: item.color}"
      @click="remoteCommand(item.type)"
    >
      <svg-icon class="icon" :icon-class="item.icon"/>
      <p>{{ item.name }}</p>
    </div>

    <remote-command-dialog
      v-model="remoteCommandDialogVisible"
      :device-data-list="[source]"
      :remoteCommandType="remoteCommandType"
    />
  </div>
</template>

<script>
import RemoteCommandDialog from '@/views/operationAndMonitoring/deviceMonitoring/components/remoteCommandDialog'

export default {
  name: "remoteInstruction",
  components:{RemoteCommandDialog},
  props: {
    source: {
      type: Object,
      default(){
        return {}
      }
    },
  },
  data() {
    return {
      commandList: [
        // type参考RemoteCommandDialog组件里面字典
        {name: '拉取客户端日志文件', type: 'pullLog',icon: 'log', color: '#36a3f7'},
        {name: '客户端重启', type: 'restart', icon: 'restart', color: '#44cd88'},
        // {name: '客户端开机', type: 'startUp', icon: 'shutdown', color: '#42d788'},
        {name: '客户端关机', type: 'shutdown', icon: 'shutdown', color: '#f1581d'},
        {name: '客户端自检', type: 'selfCheck', icon: 'selfChecking', color: '#1ed0d0'},
        // {name: '客户端升级', type: 'update',  icon: 'update', color: '#a777f1'},
      ],
      remoteCommandDialogVisible: false,
      remoteCommandType: ''
    }
  },

  methods: {
    remoteCommand(type) {
      this.remoteCommandType = type;
      this.remoteCommandDialogVisible = true;
    },
  },

  created() {
  },

  mounted() {
  }
}
</script>

<style lang="scss" scoped>
.tab-content-wrap {
  display: flex;
  flex-wrap: wrap;

  .btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 130px;
    margin: 20px;
    border-radius: 6px;
    background: skyblue;
    color: #ffffff;
    cursor: pointer;

    &:hover{
      box-shadow: 4px 4px 10px 0 rgba(0,0,0,.14);
    }

    p {
      font-size: 20px;
      margin: 0;
    }

    .icon {
      display: block;
      margin-bottom: 8px;
      font-size: 30px;
      color: #ffffff;
    }
  }
}

</style>
